<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '轮播详情',
  },
}
</route>
<template>
  <view class="container">
    <web-view v-show="newUrl" :src="newUrl"></web-view>
    <wd-loading v-show="isLoading" class="loading-wrapper" />
  </view>
</template>

<script lang="ts" setup>
const newUrl = ref('')
const isLoading = ref(true)

onLoad((options) => {
  if (options.url) {
    isLoading.value = true
    setTimeout(() => {
      newUrl.value = options.url
      isLoading.value = false
    }, 2000)
  }
})
</script>
<style>
.container {
  display: flex;
  flex-direction: column; /* 如果你想要垂直堆叠内容，可以添加这一行 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中，但在这个例子中可能不是必需的，因为只有一个子元素需要居中 */
  height: 100vh; /* 占据整个视口高度 */
  width: 100%; /* 占据整个视口宽度 */
}

.loading-container {
  /* 这个容器是可选的，但如果 wd-loading 样式导致问题，它可以帮助 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要，可以设置一个最小高度或宽度 */
  min-height: 100px; /* 或其他你需要的值 */
  min-width: 100px; /* 或其他你需要的值 */
  /* 注意：这些值应该根据 wd-loading 组件的实际大小和布局进行调整 */
}
</style>
